<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>Lookup Boxes</title>
    <link rel="stylesheet" type="text/css" href="http://localhost:8080/huarui/htdocs/js/extjs/resources/css/ext-all.css" />
    <link rel="stylesheet" type="text/css" href="http://localhost:8080/huarui/htdocs/js/extjs/resources/css/xtheme-gray.css" />
    
    <script type="text/javascript" src="http://localhost:8080/huarui/htdocs/js/extjs/ext-base.js"></script>
    <script type="text/javascript" src="http://localhost:8080/huarui/htdocs/js/extjs/ext-all.js"></script>
 	  
    <script type="text/javascript" src="Lookup.js"></script>
    <script type="text/javascript" src="LookupBox.js"></script>
    
    <style type="text/css">
        p { width:650px; }
    </style>
    
    <script>
    // some data used in the examples
		Ext.namespace('Ext.exampledata');
		
		Ext.exampledata.pyCodes = [
		        ['AL', 'Alabama', 'The Heart of Dixie'],
		        ['AK', 'Alaska', 'The Land of the Midnight Sun'],
		        ['AZ', 'Arizona', 'The Grand Canyon pyCode'],
		        ['AR', 'Arkansas', 'The Natural pyCode'],
		        ['CA', 'California', 'The Golden pyCode'],
		        ['CO', 'Colorado', 'The Mountain pyCode'],
		        ['CT', 'Connecticut', 'The Constitution pyCode'],
		        ['DE', 'Delaware', 'The First pyCode'],
		        ['DC', 'District of Columbia', "The Nation's Capital"],
		        ['FL', 'Florida', 'The Sunshine pyCode'],
		        ['GA', 'Georgia', 'The Peach pyCode'],
		        ['HI', 'Hawaii', 'The Aloha pyCode'],
		        ['ID', 'Idaho', 'Famous Potatoes'],
		        ['IL', 'Illinois', 'The Prairie pyCode'],
		        ['IN', 'Indiana', 'The Hospitality pyCode'],
		        ['IA', 'Iowa', 'The Corn pyCode'],
		        ['KS', 'Kansas', 'The Sunflower pyCode'],
		        ['KY', 'Kentucky', 'The Bluegrass pyCode'],
		        ['LA', 'Louisiana', 'The Bayou pyCode'],
		        ['ME', 'Maine', 'The Pine Tree pyCode'],
		        ['MD', 'Maryland', 'Chesapeake pyCode'],
		        ['MA', 'Massachusetts', 'The Spirit of America'],
		        ['MI', 'Michigan', 'Great Lakes pyCode'],
		        ['MN', 'Minnesota', 'North Star pyCode'],
		        ['MS', 'Mississippi', 'Magnolia pyCode'],
		        ['MO', 'Missouri', 'Show Me pyCode'],
		        ['MT', 'Montana', 'Big Sky Country'],
		        ['NE', 'Nebraska', 'Beef pyCode'],
		        ['NV', 'Nevada', 'Silver pyCode'],
		        ['NH', 'New Hampshire', 'Granite pyCode'],
		        ['NJ', 'New Jersey', 'Garden pyCode'],
		        ['NM', 'New Mexico', 'Land of Enchantment'],
		        ['NY', 'New York', 'Empire pyCode'],
		        ['NC', 'North Carolina', 'First in Freedom'],
		        ['ND', 'North Dakota', 'Peace Garden pyCode'],
		        ['OH', 'Ohio', 'The Heart of it All'],
		        ['OK', 'Oklahoma', 'Oklahoma is OK'],
		        ['OR', 'Oregon', 'Pacific Wonderland'],
		        ['PA', 'Pennsylvania', 'Keystone pyCode'],
		        ['RI', 'Rhode Island', 'Ocean pyCode'],
		        ['SC', 'South Carolina', 'Nothing Could be Finer'],
		        ['SD', 'South Dakota', 'Great Faces, Great Places'],
		        ['TN', 'Tennessee', 'Volunteer pyCode'],
		        ['TX', 'Texas', 'Lone Star pyCode'],
		        ['UT', 'Utah', 'Salt Lake pyCode'],
		        ['VT', 'Vermont', 'Green Mountain pyCode'],
		        ['VA', 'Virginia', 'Mother of pyCodes'],
		        ['WA', 'Washington', 'Green Tree pyCode'],
		        ['WV', 'West Virginia', 'Mountain pyCode'],
		        ['WI', 'Wisconsin', "America's Dairyland"],
		        ['WY', 'Wyoming', 'Like No Place on Earth']
		    ];
		    
		  var jsonData={
total:50,
items:[
{id:'AL', pyCode:'Alabama', name:'The Heart of Dixie'},
{id:'AK', pyCode:'Alaska', name:'The Land of the Midnight Sun'},
{id:'AZ', pyCode:'Arizona', name:'The Grand Canyon pyCode'},
{id:'AR', pyCode:'Arkansas', name:'The Natural pyCode'},
{id:'CA', pyCode:'California', name:'The Golden pyCode'},
{id:'CO', pyCode:'Colorado', name:'The Mountain pyCode'},
{id:'CT', pyCode:'Connecticut', name:'The Constitution pyCode'},
{id:'DE', pyCode:'Delaware', name:'The First pyCode'},
{id:'DC', pyCode:'District of Columbia', name:"The Nation's Capital"},
{id:'FL', pyCode:'Florida', name:'The Sunshine pyCode'},
{id:'GA', pyCode:'Georgia', name:'The Peach pyCode'},
{id:'HI', pyCode:'Hawaii', name:'The Aloha pyCode'},
{id:'ID', pyCode:'Idaho', name:'Famous Potatoes'},
{id:'IL', pyCode:'Illinois', name:'The Prairie pyCode'	    	          
},
{id:'IN', pyCode:'Indiana', name:'The Hospitality pyCode'},
{id:'IA', pyCode:'Iowa', name:'The Corn pyCode'},
{id:'KS', pyCode:'Kansas', name:'The Sunflower pyCode'},
{id:'KY', pyCode:'Kentucky', name:'The Bluegrass pyCode'},
{id:'LA', pyCode:'Louisiana', name:'The Bayou pyCode'},
{id:'ME', pyCode:'Maine', name:'The Pine Tree pyCode'},
{id:'MD', pyCode:'Maryland', name:'Chesapeake pyCode'},
{id:'MA', pyCode:'Massachusetts', name:'The Spirit of America'},
{id:'MI', pyCode:'Michigan', name:'Great Lakes pyCode'},
{id:'MN', pyCode:'Minnesota', name:'North Star pyCode'},
{id:'MS', pyCode:'Mississppi', name:'Magnolia pyCode'},
{id:'MO', pyCode:'Missouri', name:'Show Me pyCode'},
{id:'MT', pyCode:'Montana', name:'Big Sky Country'},
{id:'NE', pyCode:'Nebraska', name:'Beef pyCode'},
{id:'NV', pyCode:'Nevada', name:'Silver pyCode'},
{id:'NH', pyCode:'New Hampshire', name:'Granite pyCode'},
{id:'NJ', pyCode:'New Jersey', name:'Garden pyCode'},
{id:'NM', pyCode:'New Mexico', name:'Land of Enchantment'},
{id:'NY', pyCode:'New York', name:'Empire pyCode'},
{id:'NC', pyCode:'North Carolina', name:'First in Freedom'},
{id:'ND', pyCode:'North Dakota', name:'Peace Garden pyCode'},
{id:'OH', pyCode:'Ohio', name:'The Heart of it All'},
{id:'OK', pyCode:'Oklahoma', name:'Oklahoma is OK'},
{id:'OR', pyCode:'Oregon', name:'Pacific Wonderland'},
{id:'PA', pyCode:'Pennsylvania', name:'Keystone pyCode'},
{id:'RI', pyCode:'Rhode Island', name:'Ocean pyCode'},
{id:'SC', pyCode:'South Carolina', name:'Nothing Could be Finer'},
{id:'SD', pyCode:'South Dakota', name:'Great Faces, Great Places'},
{id:'TN', pyCode:'Tennessee', name:'Volunteer pyCode'},
{id:'TX', pyCode:'Texas', name:'Lone Star pyCode'},
{id:'UT', pyCode:'Utah', name:'Salt Lake pyCode'},
{id:'VT', pyCode:'Vermont', name:'Green Mountain pyCode'},
{id:'VA', pyCode:'Virginia', name:'Mother of pyCodes'},
{id:'WA', pyCode:'Washington', name:'Green Tree pyCode'},
{id:'WV', pyCode:'West Virginia', name:'Mountain pyCode'},
{id:'WI', pyCode:'Wisconsin', name:"America's Dairyland"},
{id:'WY', pyCode:'Wyoming', name:'Like No Place on Earth'}
]};
      var ps={size:'4',type:'Company',page:'1',keyword:'0'}; 
			var store = new Ext.data.JsonStore({
	        fields: ['id', 'pyCode', 'name'],
	        id:"id",
	        root:'items',   
          totalProperty: 'total',  
	        //method: 'GET',
	        url: "http://localhost:8080/huarui/comp/autotipsor.do",
	        remoteSort: true,   
	        baseParams:ps
	        //data: jsonData
	        //data : Ext.exampledata.pyCodes // from pyCodes.js
	        /*[{"id":2,"email":"ssss@22.com","name":"中国一汽配件厂","pyCode":"0.12"},{"id":1
	          ,"email":"sunpeng@ss.com","name":"中国丰田股份有限公司","pyCode":"0.1232"}]
	          */
	    });
	    
	    
      
    	Ext.onReady(function(){
    		/*
		    		var lookup = new Ext.form.Lookup({
		        store: store,
		        displayField:'name',
		        lookupField:'pyCode',
		        valueField:'id',
		        hiddenName:'country',
		        typeAhead: false,
		        mode: 'local',
		        tpl : '<tpl for="."><div ext:qtip="{pyCode}" class="x-combo-list-item">{pyCode}  {name}</div></tpl>',
		        triggerAction: 'query',
		        emptyText:'Select a Company...',
		        selectOnFocus:true,
		        applyTo: 'local-pyCodes',
		        queryDelay:2,
		        typeAheadDelay:2
		    });
		    
		    var combo = new Ext.form.ComboBox({
		        store: store,
		        displayField:'name',
		        valueField:'id',
		        hiddenName:'country1',
		        typeAhead: true,
		        mode: 'remote',
		        //pageSize: 10,
		        //tpl : '<tpl for="."><div ext:qtip="{pyCode}. {name}" class="x-combo-list-item">{pyCode}. {name}</div></tpl>',
		        triggerAction: 'all',
		        emptyText:'Select a Company...',
		        selectOnFocus:true,
		        applyTo: 'local-pyCodes-combo'
		    });
		    */

		    var lookupbox = new Ext.form.LookupBox({
		        store: store,
		        displayField:'name',
		        lookupField:'pyCode',
		        valueField:'id',
		        hiddenName:'country-box',
		        typeAhead: false,
		        mode: 'remote',
		        tpl : '<tpl for="."><div ext:qtip="{pyCode}.{id}" class="x-combo-list-item">{pyCode}. {name}</div></tpl>',
		        triggerAction: 'all',
		        emptyText:'Select a Company..',
		        selectOnFocus:true,
		        applyTo: 'local-pyCodes-lookupbox',
		        queryDelay:10,
		        typeAheadDelay:10,
		        pageSize:2,//要让
	          autoDestory:true,
	          queryParam:'keyword',
	          /*listeners: {
			        beforequery: function(qe){
			        		var start=0;
			            if(qe.lookup.start)
			            {
			           		start=qe.lookup.start;
			            }
			        		var page=start/qe.lookup.pageSize+1;
			        		//alert(page);
			            qe.query={type:'Company',"size":qe.lookup.pageSize,"page":page,"keyword":qe.lookup.getRawValue()};
			        }
			      },*/
	          triggerTags : [{url: 'http://localhost:8080/huarui/htdocs/test/dataAdd.html',height:400,width:500},
	                         {url: 'http://localhost:8080/huarui/htdocs/test/dataSearch.html',triggerClass:'x-form-search-trigger'}]
		    });
		    
		    store.on("beforeload", function(st,opts){
	         //for(var p in opts.params)
           //{
           //		alert(p+"=="+opts.params[p]);
           //};
           
           var start=0;
           if(opts.params["start"])
           {
           		start=opts.params["start"];
           }
           //alert("s="+start);
           var size=lookupbox.pageSize;
 	         var page=start/size+1;
 	         var keyword=lookupbox.getRawValue();
 	       
 	         /**
 	          * 如果采用store默认的支持分页参数start和limit,可以不用设置以下这些参数
 	          */
 	         opts.params["size"]=size;
 	         opts.params["page"]=page;
 	         /**
 	          * 当在LookupBox里配置了queryParam:'keyword'时,可以不用动态设置此值
 	          */
 	         opts.params["keyword"]=keyword;
		    });
				
	      lookupbox.initializeValue({'name':'test','pyCode':'00122','id':'1'});
    	});
    	
    </script>
</head>
<body>
	<b>Combo Demo</b><br />
	<div>
	    <input type="text" id="local-pyCodes-combo" size="60"/>
	</div>
	<br /><b>Lookup Demo</b><br />
	<div>
	    <input type="text" id="local-pyCodes" size="60"/>
	</div>
	<div><input type='button' value="查看选中的ID" onclick="javascript:alert(Ext.getDom('country').value)"/></div>
	<br /><b>LookupBox Demo</b><br />
	<div>
	    <input type="text" id="local-pyCodes-lookupbox" size="60"/>
	</div>
</body>
</html>